<template>
  <el-aside width="220px" class="sidebar">
    <div class="sidebar-logo">
      <img src="@/assets/picture/background1.png" alt="Logo" />
      <span>管理系統</span>
    </div>
    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
      <el-sub-menu index="1">
        <template #title>
          <span>用户管理</span>
        </template>
        <el-menu-item index="1-1" @click="$emit('goToUserInfoManagement')">用户信息管理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <span>权限管理</span>
        </template>
        <el-menu-item index="2-1" @click="$emit('goToRoleManagement')">角色管理</el-menu-item>
        <el-menu-item index="2-2" @click="$emit('goToMenuManagement')">菜单管理</el-menu-item>
        <el-menu-item index="2-3" @click="$emit('goToPermissionControl')">权限控制</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <span>系统管理</span>
        </template>
        <el-menu-item index="3-1" @click="$emit('goToSystemSetting')">系统设置</el-menu-item>
        <el-menu-item index="3-2" @click="$emit('goToLogManagement')">日志管理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <span>内容管理</span>
        </template>
        <el-menu-item index="4-1" @click="$emit('goToArticleManagement')">文章管理</el-menu-item>
        <el-menu-item index="4-2" @click="$emit('goToFileManagement')">文件管理</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
// 侧边栏为纯展示组件，点击事件通过 $emit 向父组件传递
defineProps({
  defaultActive: {
    type: String,
    default: '3-1'
  }
});
</script>

<style scoped>
.sidebar {
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
  min-height: 100vh;
  border-right: 1px solid #e0e7ef;
  box-shadow: 2px 0 16px rgba(80, 120, 200, 0.10);
  padding: 0;
  transition: background 0.3s;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 16px 24px;
  font-size: 20px;
  font-weight: bold;
  color: #4f46e5;
  letter-spacing: 2px;
  border-bottom: 1px solid #e0e7ef;
  background: rgba(255,255,255,0.7);
}
.sidebar-logo img {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(80, 120, 200, 0.10);
}
.el-menu-vertical-demo {
  background: transparent;
  border-right: none;
}
.el-menu-vertical-demo .el-menu-item,
.el-menu-vertical-demo .el-sub-menu__title {
  border-radius: 10px;
  margin: 6px 12px;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  font-weight: 500;
  font-size: 16px;
}
.el-menu-vertical-demo .el-menu-item:hover,
.el-menu-vertical-demo .el-sub-menu__title:hover {
  background: #c7d2fe;
  color: #3b3b3b;
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(80, 120, 200, 0.08);
}
.el-menu-vertical-demo .el-menu-item.is-active {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}
</style>
